<template>
	<view class="imt-audio">
		<view class="audio-wrapper">
			<view class="audio-number">{{currentTime}}</view>
			<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"
			 @change="change"></slider>
			<view class="audio-number">{{durationTime}}</view>
		</view>
		<view class="audio-control-wrapper" :style="{color:color}">
			<view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev">&#xe601;</view>
			<view v-if="loading" class="audioLoading"></view>
			<image v-if="!loading" v-bind:class="controlStyle" class="audio-control" src="../../static/icon/music.png" @click="operation"></image>
			<view class="audio-control audio-control-next" v-if="control" :style="{borderColor:color}" @click="next">&#xe601;</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			src: String, //音频链接
			autoplay: Boolean, //是否自动播放
			duration: Number, //总时长（单位：s）
			control: {
				type:Boolean,
				default:true
			}, //是否需要上一曲/下一曲按钮
			continue:Boolean,//播放完成后是否继续播放下一首，需定义@next事件
			color: {
				type:String,
				default:'#295247'
			} //主色调
		},
		data() {
			return {
				audio: '', //音频组件
				currentTime: '', //当前播放时间
				durationTime: '', //总时长
				current: '', //slider当前进度
				loading: false, //是否处于读取状态
				paused: true, //是否处于暂停状态
				seek: false, //是否处于拖动状态
				isPlay: false,
				controlStyle: ['audio-control']
			}
		},
		watch: {
			isPlay(e){
				if(e){
					this.controlStyle = ['audio-control', 'control-play']
				}else{
					this.controlStyle = ['audio-control']
				}
			},
			//监听音频地址更改
			src(e) {
				this.audio.src = e
				this.current = 0
				this.audio.play()
				this.loading = true
			},
			//监听总时长改变
			duration(e) {
				this.durationTime = this.format(e)
			},
			//监听当前进度改变
			current(e) {
				this.currentTime = this.format(e)
			}
		},
		destroyed(){
			this.audio.destroy()
		},
		created() {
			this.audio = uni.createInnerAudioContext()
			this.audio.src = this.src
			this.current = 0
			this.durationTime = this.format(this.duration)
			this.audio.obeyMuteSwitch = false
			this.audio.autoplay = this.autoplay
			//音频进度更新事件
			this.audio.onTimeUpdate(() => {
				if (!this.seek) {
					this.current = this.audio.currentTime
				}
			})
			//音频播放事件
			this.audio.onPlay(() => {
				this.paused = false
				this.loading = false
			})
			//音频暂停事件
			this.audio.onPause(() => {
				this.paused = true
			})
			//音频结束事件
			this.audio.onEnded(() => {
				if (this.continue) {
					this.next()
				} else {
					this.isPlay = false
					this.paused = true
					this.current = 0
				}
			})
			//音频完成更改进度事件
			this.audio.onSeeked(() => {
				this.seek = false
			})
		},
		methods: {
			//返回prev事件
			prev() {
				this.$emit('prev')
			},
			//返回next事件
			next() {
				this.$emit('next')
			},
			//格式化时长
			format(num) {
				return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(
					Math.floor(num % 60)).length) + Math.floor(num % 60)
			},
			//播放/暂停操作
			operation() {
				if (this.audio.paused) {
					this.isPlay = true
					this.audio.play()
					this.loading = true
				} else {
					this.isPlay = false
					this.audio.pause()
				}
			},
			//完成拖动事件
			change(e) {
				this.audio.seek(e.detail.value)
			}
		},
	}
</script>

<style>
	@font-face {
		font-family: 'icon';
		src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot');
		src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot?#iefix') format('embedded-opentype'),
			url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff') format('woff'),
			url('//at.alicdn.com/t/font_1104838_fxzimc34xw.ttf') format('truetype'),
			url('//at.alicdn.com/t/font_1104838_fxzimc34xw.svg#iconfont') format('svg');
	}

	.imt-audio {
		padding: 30upx;
		border-radius: 20upx;
		background-color: #f9f9f9;
	}

	.audio-wrapper {
		display: flex;
		align-items: center;
	}

	.audio-number {
		font-size: 24upx;
		line-height: 1;
		color: #333;
	}

	.audio-slider {
		flex: 1;
		margin: 0 30upx;
	}

	.audio-control-wrapper {
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "icon" !important;
		height: 100rpx;
	}

	.audio-control {
		font-size: 32upx;
		line-height: 1;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
	
	.control-play{
		animation: 5s control-roate linear infinite;
	}
	@keyframes control-roate{
		from{transform: rotate(0);}
		to{transform: rotate(360deg);}
	}
	
	.audio-control-switch {
		font-size: 40upx;
		margin: 0 80upx;
	}

	.audio-control-next {
		transform: rotate(180deg);
	}

	.audioLoading {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: transparent;
		border-top: 5rpx solid #1296db;
		border-right: 5rpx solid transparent;
		border-bottom: 5rpx solid #1296db;
		border-left: 5rpx solid transparent;
		animation: 2s loading linear infinite;
	}
	@keyframes loading {
		0%{
			transform: rotate(0);
		}
		100%{
			transform: rotate(360deg);
		}
	}
</style>